<template>
  <div style="width: 100%; height: 100%">
    <h4 style="margin: 10px 20px">全部天线</h4>
    <div style="width: 100%; height: 1px; background-color: #dfe4e8"></div>
    <div
      class="servo-block"
      v-for="(item, index) in antennaInfoList"
      :key="index"
    >
      <div style="width: 100%; height: 100%; display: flex" @click="goTo(item)">
        <div class="servo-pic">
          <div
            class="status-light"
            style="background-color: #00ff00; color: #00ff00"
          ></div>
          <img
            src="../../assets/images/u18504.png"
            style="width: 72px; height: 66px; margin: 5px 34px"
          />
          <!-- <div style="width:140px;text-align:center;margin-top:10px;">未对星</div> -->
        </div>
        <div style="display: inline-block">
          <h3 style="color: #3366ff; margin: 10px 15px 5px 15px">
            {{ item.anteName }}
          </h3>
          <div
            style="line-height: 30px; display: inline-block; margin: 5px 20px"
          >
            方位：{{ item.directionLocation }}<br />
            俯仰：{{ item.pitchLocation }}<br />
            电平值：{{ item.electricalLevel}}
          </div>
          <div
            style="
              line-height: 30px;
              display: inline-block;
              margin: 5px 0 5px 30px;
            "
          >
            目标方位：{{ item.directionDestLocation }}<br />
            目标俯仰：{{ item.pitchingDestLocation }}<br />
            锁定状态：{{ item.trackSign }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { FirstTab } from "./firstTab";
import { SecondTab } from "./secondTab";
import { antennaList } from "../../api/tansfer";
export default {
  components: {
    FirstTab,
    SecondTab,
  },
  data() {
    return {
      secRadio: "工作参数",
      antennaInfoList: [],
      antennaInfo: {
        anteId: "",
        anteName: "",
        directionLocation: "",
        pitchLocation: "",
        directionDestLocation: "",
        pitchingDestLocation: "",
        electricalLevel:"",
        trackSign:""
      },
    };
  },
  mounted() {
    this.$nextTick(()=>{
        this.getAntennaList();
        this.initWebSocket();
    })
  },
  beforeDestroy() {
    this.webSocket && this.webSocket.close();
  },
  methods: {
    getAntennaList() {
      antennaList().then((res) => {
        let list = res.data.data;
        list.map((item) => {
            this.antennaInfo = {
                anteId: "",
                anteName: "",
                directionLocation: "",
                pitchLocation: "",
                directionDestLocation: "",
                pitchingDestLocation: "",
                electricalLevel:"",
                trackSign:""
            },
            this.antennaInfo.anteId = item.anteId;
            this.antennaInfo.anteName = item.anteName;
            this.antennaInfoList.push(this.antennaInfo)
        });
      });
    },
    goTo(item) {
      this.$router.push({ path: "secondPage", query: { anteId: item.anteId } });
    },
    initWebSocket() {
      const wsuri = process.env.VUE_APP_WS_API + "/antenna/toec/yk/ws/1_12345678";
      this.webSocket = new WebSocket(wsuri);
      this.webSocket.onmessage = this.webSocketOnMessage;
      this.webSocket.onopen = this.webSocketOnOpen;
      this.webSocket.onerror = this.webSocketOnError;
      this.webSocket.onclose = this.webSocketClose;
    },
    webSocketOnOpen() {
      console.log("websocket已打开");
    },
    webSocketOnError() {
      console.log("websocket发生了错误");
    },
    webSocketOnMessage(e) {
      if (e.data) {
        let param = JSON.parse(e.data);
        param.map(item=>{
            this.antennaInfoList.map(itemNext=>{
                if(item.anteId == itemNext.anteId){
                    if(item.sifuStatusDTO){
                        itemNext.directionLocation = item.sifuStatusDTO.directionLocation;
                        itemNext.pitchLocation = item.sifuStatusDTO.pitchLocation;
                        itemNext.directionDestLocation = item.sifuStatusDTO.directionDestLocation;
                        itemNext.pitchingDestLocation = item.sifuStatusDTO.pitchingDestLocation;
                        itemNext.electricalLevel = item.sifuStatusDTO.electricalLevel;
                        itemNext.trackSign = item.sifuStatusDTO.trackSign;
                    }
                }
            })
        })
      }
    },
    webSocketClose(e) {
      console.log("断开连接", e);
    },
  },
};
</script>
  <style lang="scss">
.servo-index {
  width: 99%;
  height: 850px;
  margin: 10px;
  background-color: #ffffff;
  border-radius: 2px;
}
.servo-block {
  width: 24vw;
  height: 140px;
  border: 1px solid #c8d9ef;
  margin: 10px 0 0 15px;
  display: inline-block;
  background-color: #f8f9fa;
}
.servo-pic {
  border-right: 1px solid #c8d9ef;
  display: inline-block;
  background-color: #ffffff;
}
.status-light {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  box-shadow: 0 0 5px;
  margin: 5px;
}
</style>
  